<template>
    <!-- 最外层只能有一个组件，不能出现多个 -->
    <div class="zlst-components-uploadFile-uploadFileIndex">
            <!-- 第一步：选择文件类型 和 上传文件 -->
            <upload-first-step v-if="isFirstStep"
                               @next-step="firstNextStep"
                               @cancel="firstCancel"
                               :serverUrl="serverUrl"
                               :uploadTypeObjectArray = "uploadTypeObjectArray"
                               @upload-file-success="uploadFileSuccess"
                               @meassage-cuting="messageCuing"
            ></upload-first-step>

            <!-- 第二步：选择文件类型 和 上传文件 -->
            <upload-second-step v-if="isSecondStep"
                                @before-step="secondBeforeStep"
                                @next-step="secondNextStep"
                                @cancel="secondCancel"
                                :mappingField="mappingField"
                                :businessCode="businessCode"
                                @meassage-cuting="messageCuing"
            ></upload-second-step>

                   <!-- 第三步：选择文件类型 和 上传文件 -->
        <upload-third-step v-if="isThirdStep"
                           @before-step="thirdBeforeStep"
                           @cancel="thirdCancel"
                           :serverUrl="serverUrl"
                           :insertSQLResult="insertSQLResult"
                           @meassage-cuting="messageCuing"
        ></upload-third-step>

    </div>
</template>

<script>
    import uploadFirstStep from "./uploadFirstStep.vue"
    import uploadSecondStep from "./uploadSecondStep.vue"
    import uploadThirdStep from "./uploadThirdStep.vue"
    import Ajax from "../../js/Ajax/index.js"
    import axios from 'axios'

    var STEP_STATUS = {
        "1": "first",
        "2": "second",
        "3": "third",
    };

    Ajax.init({
        baseUrl: "",          // 是否设置 http(s)://***.com/, 即 http_origin，默认为空
        apiList: {},    // http请求地址的字典型
         checkToken: false     // 是否在每个请求的头部设置token，默认为true
    });
    var getData = Ajax.methods;
    export default {
        props:{
            // server URL
            serverUrl: {
                type: String,
                default: ''
            },
            // 业务码，必传且是字符串
            businessCode: {
                type: String,
                required: true,
                default: ""
            },
            // 是否显示模态框
            currentStepNumber: {
                type: String,
                required: true,
                default: "first"
            },
        },
        mounted: function() {
            this.currentStep = this.currentStepNumber;
            var that = this;
            getData.getUrl(this.serverUrl + '/cpsFimFilerule/findByBusiCode/'+that.businessCode).then(function (res) {
                // 获取上传文件的展示对象，根据用户选择不同上传的文件类型，则显示不同的数据
                that.uploadTypeObjectArray = res.data;
            });
        },
        watch:{
            businessCode: function (newValue, oldValue){
                var that = this;
                getData.getUrl(this.serverUrl + '/cpsFimFilerule/findByBusiCode/'+that.businessCode).then(function (res) {
                    // 获取上传文件的展示对象，根据用户选择不同上传的文件类型，则显示不同的数据
                    that.uploadTypeObjectArray = res.data;
                });
            }
        },
        data: function () {
            return {
                // 上传文件类型的数据对象 ---- 初始化数据，防止报错，找不到对象
                uploadTypeObjectArray: [{
                    "createdBy": null,
                    "createTime": null,
                    "modifiedBy": null,
                    "modifyTime": null,
                    "remark": "",
                    "active": null,
                    "fileruleId": "",
                    "busiCode": "",
                    "fileFormat": "txt",
                    "filesizeSynLimit": 0,
                    "filesizeLimit": 0,
                    "fileheadSize": 0,
                    "filetailSize": 0,
                    "paramSeparator": "",
                    "tips": "",
                    "templatePath": null,
                    "fileExtension": "",
                    // 第二步，点击下一步，防止重复提交请求，如果是false，表示可以发送请求，如果是true，则表示不能重复提交
                    secondRepeatFlag:false,
                }],
//                // 默认选择第一步 —— 上传文件
                currentStep: "first",
                // 作为第二步骤 用户手动映射关系列表的方法
//                mappingField: uploadFileResponseData.data,
                mappingField: {},
                // 插入数据库
                insertSQLResult:{},
            };
        },
        methods: {
            // 上传文件成功，返回服务器返回的数据
            uploadFileSuccess: function (respData){
                this.mappingField = respData;
            },
            // 从第一个步骤，跳转到第二个步骤
            firstNextStep: function (repetingProcessmode,fileExtension) {
                // 如果 this.mappingField 不为空，则表示上传文件成功，才允许跳转到下一步
                if(this.mappingField.filePath!=null && this.mappingField.filePath!=''){
                    this.mappingField.repetingProcessmode=repetingProcessmode;
                    if((fileExtension.toLocaleLowerCase().indexOf("xls")===-1)&&(fileExtension.toLocaleLowerCase().indexOf("xlsx")===-1)){
                        //直接上传数据
                        var resultObj = {};
                        resultObj["businessCode"] = this.businessCode;
                        resultObj["titleMachMap"] ={};
                        resultObj["paramTitle"] = [];
                        resultObj["fileruleId"] = this.mappingField.fileruleId;
                        resultObj["repetingProcessmode"] = this.mappingField.repetingProcessmode;
                        resultObj["fileName"] = this.mappingField.fileName;
                        resultObj["filePath"] = this.mappingField.filePath;
                        this.secondNextStep(resultObj);
                    }else{
                        this.changeStep(2);
                    }

                }else{
                   // alert("请先上传模板文件！");
                    this.messageCuing("请先上传模板文件！",3);
                }
            },
            // 在第一个步骤，点击了取消的事件
            firstCancel: function () {
                this.$emit("close-modal");
            },

            // 从第二个步骤，跳转到第一个步骤
            secondBeforeStep: function () {
                this.changeStep(1);
            },
            // 从第二个步骤，跳转到第三个步骤
            secondNextStep: function (responeData) {
                var that = this;
                if(!this.secondRepeatFlag){
                    this.secondRepeatFlag = true;
                    getData.postUrl(this.serverUrl + '/cpsFimBusinessfileparam/dataUpload',responeData).then(function (res) {
                        that.secondRepeatFlag = false;
                        // 获取上传文件的展示对象，根据用户选择不同上传的文件类型，则显示不同的数据
                        that.insertSQLResult = res.data;
                        if(that.insertSQLResult.resultCode!=0){
                            that.messageCuing(that.insertSQLResult.message,3);
                            return;
                        }
                        that.changeStep(3);
                    });
                }
            },
            // 从第二个步骤，点击了取消的事件
            secondCancel: function () {
                this.$emit("close-modal");
            },

            // 从第三个步骤，跳转到第二个步骤
            thirdBeforeStep: function () {
                this.changeStep(2);
            },
            // 从第三个步骤，点击了取消的事件
            thirdCancel: function () {
            },

            /**
             * 切换步骤
             * @param currentStepNum 代表当前的步骤状态，只能是 1、2、3数字
             * */
            changeStep: function (currentStepNum) {
                this.currentStep = STEP_STATUS[currentStepNum];
            },
            /**
             * 消息信息提醒
             * @param message 提示信息的内容
             * @param messageType 消息提醒的类型 1 普通提醒 2成功提醒 3警告提醒 4错误提醒
             */
            messageCuing:function (message,messageType) {
                if(messageType==1){
                    this.$Message.info(message);
                }else if(messageType==2){
                    this.$Message.success(message);
                }else if(messageType==3){
                    this.$Message.warning(message);
                }else if(messageType==4){
                    this.$Message.error(message);
                }

            }

        },
        computed: {
            // 是否是显示第一步
            "isFirstStep":function (){
                console.log("isFirstStep : " + (this.currentStep == "first"))
                return this.currentStep == "first";
            },
            // 是否是显示第二步
            "isSecondStep":function (){
                console.log("isSecondStep : " + (this.currentStep == "second"))
                return this.currentStep == "second";
            },
            // 是否是显示第三步
            "isThirdStep":function (){
                console.log("isThirdStep : " + (this.currentStep == "third"))
                return this.currentStep == "third";
            },
        },
        components: {
            uploadFirstStep,
            uploadSecondStep,
            uploadThirdStep,
        }
    }
</script>

<style scoped lang="scss">
.zlst-components-uploadFile-uploadFileIndex{

}
</style>
